 <template>
  <div>
    <div class="filter-container">
      <router-link to="/template/add">
        <el-button
          class="filter-item add-style"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-circle-plus-outline"
        >添加</el-button>
      </router-link>
      <el-input
        placeholder="名称/创建人"
        v-model="searchData"
        style="width: 200px;"
        class="filter-item"
      />

      <el-button class="filter-item" icon="el-icon-search" @click="search()">搜索</el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        icon="el-icon-delete"
        @click="deleteRows"
      >删除已选择</el-button>
      <el-button
        class="filter-item edit-style"
        style="margin-left: 10px;"
        type="warning"
        @click="releaseRows"
      >上传已选择</el-button>
    </div>

    <tTable :columns="columns" :data="tableData">
      <!-- 封面 -->
      <template v-slot:logo="slotProps">
        <img :src="slotProps.scope.row.logo" class="avatar" alt>
      </template>

      <!-- 状态 -->
      <template v-slot:status="slotProps">
        <el-tag
          :type="slotProps.scope.row.status | statusFilter"
        >{{slotProps.scope.row.status === 'DRAFT' ? '草稿' : '已发布'}}</el-tag>
      </template>

      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          v-if="slotProps.scope.row.status === 'DRAFT'"
          @click.native.prevent="releaseRow(slotProps.scope.$index, slotProps.scope.row)"
          type="primary"
          class="add-style"
          size="mini"
        >发布</el-button>
        <el-button
          @click.native.prevent="editRow(slotProps.scope.$index, slotProps.scope.row)"
          type="warning"
          class="edit-style"
          size="mini"
        >编辑</el-button>
        <el-button
          @click.native.prevent="deleteRow(slotProps.scope.$index, slotProps.scope.row)"
          type="danger"
          class="delete-style"
          size="mini"
        >删除</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>
  </div>
</template>

<script>
import {
  getTemplate,
  removeTemplate,
  releaseOneTemplate,
  searchTemplate
} from "api/getData";
import { formatDateTime } from "src/util/time";
import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        DRAFT: "info", // 模板草稿
        TRANSLATE: "danger", // 人工翻译
        RELEASE: "warning", // 模板发布
        SEND: "success" // 已经发布
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      tableData: [],
      searchData: "",
      pageNumber: 1, //当前页
      multipleSelection: "", // 多选

      total: -1,

      columns: [
        {
          attr: { label: "", type: "selection", width: "55" }
        },
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "名称" }
        },
        {
          slot: "logo",
          attr: { prop: "logo", label: "封面" }
        },
        {
          slot: "status",
          attr: { prop: "status", label: "状态" }
        },
        {
          attr: { prop: "updatedAt", label: "修改时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "300" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    // 模板数据
    this.getData();
  },
  methods: {
    releaseRow(index, row) {
      this.$confirm("确定发布么").then(_ => {
        releaseOneTemplate(row.id).then(res => {
          this.$message.success("发布成功");
          this.getData(this.pageNumber);
        });
      });
    },
    releaseRows() {
      this.$confirm("确认发布选择场景么").then(_ => {
        this.multipleSelection.map(item => {
          releaseOneTemplate(item.id);
          this.$message.success("发布成功");
        });
        this.getData(this.pageNumber);
      });
    },
    deleteRow: function(index, row) {
      this.$confirm("确定删除么").then(_ => {
        removeTemplate(row.id).then(res => {
          this.$message.success("删除成功");
          this.getData(this.pageNumber);
        });
      });
    },
    deleteRows() {
      this.$confirm("确认删除选择场景么").then(_ => {
        this.multipleSelection.map(item => {
          removeTemplate(item.id);
          this.$message.success("删除成功");
        });
        this.getData(this.pageNumber);
      });
    },
    editRow: function(index, row) {
      this.$router.push("/template/" + row.id);
    },
    search: function(pageNumber) {
      var data = {
        pageNumber: pageNumber || 1,
        searchName: this.searchData
      };
      searchTemplate(data).then(res => {
        this.total = res.totalElements;
        this.tableData = res.content.map(item => {
          item.updatedAt = formatDateTime(item.updatedAt || item.createdAt);
          return item;
        });
      });
    },
    handleCreate: function() {},
    getData: function(pageNumber) {
      getTemplate({ pageNumber: pageNumber, pageSize: 10 }).then(res => {
        this.total = res.totalElements;
        this.tableData = res.content.map(item => {
          item.updatedAt = formatDateTime(item.updatedAt || item.createdAt);
          return item;
        });
      });
    },
    handleChange: function(pageNumber) {
      this.getData(pageNumber);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.longTerm-style {
  color: #888;
  padding: 10px;
}

.input-width {
  width: 400px;
}

.upload-width {
  width: 400px;
}
.cascader-style {
  width: 300px;
  margin-bottom: 20px;
}

.widthBtn {
  width: 200px;
  margin: 20px 200px 0 0;
}

.avatar {
  width: 100px;
  // height: auto;
  display: block;
  margin: 5px 0;
}
</style>
